<!-- 论文流程设置 -->
<template>
  <div class="courseBox">
    <div class="courseBoxTop">
      <el-form class="courseForm" ref="form" label-width="65px" :inline="true">
        <el-form-item label="阶段名称">
          <el-input v-model="stageName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="成绩占比">
          <el-input v-model="percentage" placeholder="请输入成绩"></el-input>
        </el-form-item>
        <el-form-item label="负责教师">
          <el-select
            class="select"
            placeholder="请选择"
            v-model="teacher"
          >
            <el-option 
              v-for="(item, index) in teacherList"
              :key="index"
              :label="item.teacherName"
              :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开启条件" label-width="80px">
          <el-select
            class="select"
            v-model="condition"
            placeholder="补考科目"
          >
            <el-option 
              v-for="(item, index) in kaoshiList"
              :key="index"
              :label="item.examPaper"
              :value="item.examId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="论文方向" label-width="80px">
          <el-input v-model="direction" placeholder="请输入论文"></el-input>
        </el-form-item>
        <el-form-item class="chaxunBtn">
          <el-button type="primary" size="small" @click="search">
            <span
              class="icon iconfont icon-chaxun"
              style="font-size: 12px; font-weight: bold"

              >查询</span
            >
          </el-button>
          <el-button @click="refreshInput" size="small" icon="el-icon-refresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 管理列表 -->
    <div class="courseBoxBottom">
      <div class="bottomHeader">
        <span class="title">管理列表</span>
        <div class="bottomHeaderBtn">
          <el-button type="primary" plain @click="goSetExamAttend">
            新增
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <div class="bottomMian">
        <el-table
          :cell-style="{ padding: '5px' }"
          empty-text="暂无数据"
          ref="multipleTable"
          border
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column prop="stageName" label="阶段名称">
          </el-table-column>
          <el-table-column
            prop="condition"
            label="阶段开启条件"
          ></el-table-column>
          <el-table-column
            prop="percentage"
            label="所占成绩比例"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="direction"
            label="论文方向"
          ></el-table-column>
          <el-table-column
            prop="teacher"
            label="负责教师"
          ></el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="setBtn(scope.row)">编辑</el-button>
              <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </div>
       <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout=" prev, pager, next"
        :total="query.total"
      ></el-pagination>

      <div class="jumper">
        跳到第
        <input type="text" ref="pageNum" :value="query.pageNum" />
        页
      </div>
      <button @click="goPage" style="color:white">确定</button>
    </div>
    </div>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        class="dialogForm"
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="阶段名称" prop="studentName">
          <el-input
            placeholder="请输入阶段名"
            v-model="form.stageName"
          ></el-input>
        </el-form-item>
        <el-form-item label="成绩占比" prop="studentNumber">
          <el-input
            placeholder="请输入成绩"
            v-model="form.percentage"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责教师" prop="teacher">
          <el-select
            class="select"
            placeholder="请选择老师"
            v-model="form.teacher"
          >
            <el-option 
              v-for="(item, index) in teacherList"
              :key="index"
              :label="item.teacherName"
              :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开启条件" label-width="120px" prop="condition">
          <el-select
            class="select"
            v-model="form.condition"
            placeholder="选择条件"
          >
            <el-option 
              v-for="(item, index) in kaoshiList"
              :key="index"
              :label="item.examPaper"
              :value="item.examId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="论文方向" label-width="120px" prop="direction">
          <el-input v-model="form.direction" placeholder="请输入论文"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOut"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改"
      :visible.sync="editdialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        class="dialogForm"
        :model="editform"
        :rules="rules"
        ref="form"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="阶段名称" prop="studentName">
          <el-input
            placeholder="请输入姓名"
            v-model="editform.stageName"
          ></el-input>
        </el-form-item>
        <el-form-item label="成绩占比" prop="studentNumber">
          <el-input
            placeholder="请输入学号"
            v-model="editform.percentage"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责教师" prop="teacher">
          <el-select
            class="select"
            placeholder="请选择老师"
            v-model="editform.teacher"
          >
            <el-option 
              v-for="(item, index) in teacherList"
              :key="index"
              :label="item.teacherName"
              :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开启条件" label-width="120px" prop="condition">
          <el-select
            class="select"
            v-model="editform.condition"
            placeholder="补考科目"
          >
            <el-option 
              v-for="(item, index) in kaoshiList"
              :key="index"
              :label="item.examPaper"
              :value="item.examId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="论文方向" label-width="120px" prop="direction">
          <el-input v-model="editform.direction" placeholder="请输入论文"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="editOut"
          >确 定</el-button
        >
      </span>
    </el-dialog>
   
  </div>
</template>
  
  <script>
import "@/styles/picture.scss";
import {
flowList,
flowAdd,
flowDel,
flowEdit
} from "@/api/paperAdministration/paperPerformance.js"
import {
getTeacherListDataApi
} from "@/api/educational/teacherManagement.js"
import {
  getExaminationListApi,
} from "@/api/testManagement/Examination.js";
export default {
  data() {
    return {
       // 查询数据
      tableData: [],    //表格数据
      form:{
         stageName:'',
         condition:'',
         percentage:'',
         direction:'',
         teacher:'',
      },
      editform:{
         stageName:'',
         condition:'',
         percentage:'',
         direction:'',
         teacher:'',
         id:''
      },
      teacherList:[],
      kaoshiList:[],
      query: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      stageName:'',
      condition:'',
       percentage:'',
       direction:'',
       teacher:'',
      dialogVisible: false, // 弹出层显示
      editdialog:false,
      rules: {
        stageName: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        percentage: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        teacher: [{ required: true, message: "此为必填项", trigger: "blur" }],
        condition: [{ required: true, message: "此为必填项", trigger: "blur" }],
        direction: [{ required: true, message: "此为必填项", trigger: "blur" }],
      },
    };
  },
  created() {
  },
  mounted() {
    this.getList()
    this.getteacher()
    this.getkaos()
  },

  methods: {
    //教师数据列表
    async getteacher(){
      let res=await getTeacherListDataApi()
      console.log('1',res)
      this.teacherList=res.rows
    },

     //考试数据列表
    async getkaos(){
      let res=await getExaminationListApi()
      console.log('1',res)
      this.kaoshiList=res.rows
    },
    //列表数据
     async getList(){
       let res=await flowList(this.query)
       console.log(res)
       this.tableData=res.rows
       this.query.total = res.total;
     },
     //新增
     async addOut(){
       let res=await flowAdd(this.form)
       console.log(res)
       this.$message.success("添加成功");
      this.dialogVisible=false
      this.form={}
      this.getList()
     },
     //搜索
   async search(){
      let res=await flowList({ stageName: this.stageName,condition:this.condition,percentage:this.percentage,direction:this.direction,
      teacher:this.teacher })
       console.log(res)
       this.tableData=res.rows
   },
   // 重置
    refreshInput() {
      this.stageName = "";
      this.percentage = "";
      this.teacher = "";
      this.condition = "";
      this.direction = "";
      this.getList()
    },
    // 确认关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },

    // 新增流程设置
    goSetExamAttend() {
      this.dialogVisible = true;
    },

    // 修改流程设置
    setBtn(row) {
      console.log(row)
      this.editdialog = true;
      this.editform.condition=row.condition
      this.editform.direction=row.direction
      this.editform.stageName=row.stageName
      this.editform.percentage=row.percentage
      this.editform.teacher=row.teacher
      this.editform.id=row.id

    },
    async editOut(){
       let res=await flowEdit(this.editform)
       console.log(res)
       this.$message.success("修改成功");
      this.editdialog=false
      this.getList()
    },
    // 分页
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getList();
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getList();
    },
    goPage() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
      this.getList();
    },
    // 删除流程设置
    delBtn(row) {
        console.log(row)
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning"
        })
          .then(() => {
            flowDel({ id: JSON.stringify(row.id) }).then(res => {
              console.log(res);
              this.$message.success("删除成功");
              this.getList();
            });
          })
          .catch(() => {});
      }
  },
};
</script>
  
  <style lang="scss" scoped>
.courseBoxTop {
  padding-left: 10px;
}
.courseForm {
  .el-form-item {
    ::v-deep .el-form-item__label {
      font-size: 13px;
    }

    .el-input {
      width: 130px;
    }
    .el-select {
      width: 130px;
    }
  }
}
.dialogForm {
  .el-form-item {
    .el-select {
      width: 207px;
    }
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 150px;
  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }
  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    background-color: #4895db;
    border: solid 1px #4895db;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
  }
}
.chaxunBtn {
  margin-left: 5px;
}
.action {
  cursor: pointer;

  span {
    font-size: 12px;
    color: #4b93d5;
  }
}
</style>
